<script>
export default {
  render(h) {
    // 虚拟dom就是描述真实dom就是js对象
    // jsx理解上尚可，和我们template很像
    /**
     * h函数
     *  第一个参数 标签名 或者传入组件也行
     *  第二个参数 属性
     *  第三个参数 children - 可以传vnode 也可以传文本
     */
    // console.log(h)
    // const vnode = (
    //   <div>
    //     <h1>playground</h1>
    //     <h2>sf</h2>
    //   </div>
    // )

    // const vnode = h('div', {
    //   class: ['a', 'b', 'c'],
    //   attrs: {
    //     a: '1',
    //     b: 2,
    //     c: true
    //   }
    // }, [
    //   h('h1', {}, '哈哈')
    // ])
    // const vnode = (
    //   <ul>
    //     <li>1</li>
    //     <li>2</li>
    //     <li>3</li>
    //   </ul>
    // )
    const arr = Array.from({ length: 100 }, (item, index) => index + 1)
    const vnode = h('ul', {}, arr.map(item => {
      return h('li', {
        class: item % 2 === 0 ? 'a' : 'b'
      }, item > 50 ? '数字太大' : item)
    }))
    console.log(vnode)
    return vnode
  }
}
</script>

<style>

</style>
